<template>
    <div class="home">

        <router-view></router-view>
        <div class="navList">
            <div class="nav" :class="active === -1 ? 'active' : ''" @click="selectGameType('all', -1)">
                <el-icon>
                    <Menu />
                </el-icon>
                All
            </div>
            <div class="nav" :class="active === index ? 'active' : ''" @click="selectGameType(item, index)"
                v-for="(item, index) in navList" :key="index">
                <div class="icon" :style="{ backgroundPositionX: item.position }"></div>
                <div class="name">{{ item.name }}</div>
            </div>
        </div>
        <GameList :gameData="gameList"></GameList>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getSiteMsg } from '@/apis/home.ts'
import { useRouter } from 'vue-router'
import GameList from '@/components/gameList.vue'

const router = useRouter()

const navList = ref<any>([
    {
        name: 'Action',
        position: '-21px'
    },
    {
        name: 'Adventure',
        position: '-43px'
    },
    {
        name: 'Casual',
        position: '-65px'
    },
    {
        name: 'Puzzle',
        position: '-87px'
    },
    {
        name: 'Racing',
        position: '0px'
    },
    {
        name: 'shooter',
        position: '-109px'
    },
    {
        name: 'Sports',
        position: '-131px'
    },
    {
        name: 'Strategy',
        position: '-153px'
    },

])
const active = ref<any>(-1)
interface gameListType {
    description: string
    id: number
    platform: number
    strategy: string
    thumbnail: string
    title: string
    title_pl: string
    url: string
}
const gameList = ref([] as gameListType)

onMounted(() => {
    getData('All')
})

const getData = async (type: string) => {
    let res:any = await getSiteMsg({
        'game_type': '0',
        'game_strategy': type
    })
    console.log(res.data);
    
    gameList.value = res.data.data
}

const selectGameType = (obj: any, index: number) => {
    active.value = index
    getData(obj.name)
}


</script>

<style lang="scss" scoped>
.home {
    .navList {
        width: calc(100vw);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 44px;
        background-color: $bg-color2;
        overflow: auto;
        .nav {
            display: flex;
            align-items: center;
            height: .26rem;
            min-height: 24px;
            min-width: 80px;
            padding: .10rem;
            margin-left: 15px;
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            background-color: $bg-color3;
            border-radius: 6px;
            cursor: pointer;

            .icon {
                width: 20px;
                height: 20px;
                margin-right: .10rem;
                background: url('@/assets/img/sprite (1).png') no-repeat;
                background-position: 0 0;
            }

            &:first-child {
                .el-icon {
                    font-size: 18px;
                    color: #000;
                    margin-right: .10rem;
                }
            }
        }

        .active {
            background-color: #feb101;
        }
    }

    :deep(.el-overlay) {
        background-color: transparent !important;
        height: calc(100% - .5rem);
        top: .5rem;
        background-color: $bg-color2;

        .el-drawer {
            padding-top: 14px;
            background-color: $bg-color2;
            font-size: 14px;
            color: #fff;
            font-weight: 600;
            div{
                height: .5rem;
                line-height: .5rem;
            }
        }
    }
}
</style>